---
title: Quais são as diferentes maneiras de esconder conteúdo visualmente (e torná-lo disponível apenas para leitores de tela)?
---

Essas técnicas estão relacionadas à acessibilidade (a11y).

## Tamanho pequeno/zero

`width: 1px; height: 1px` e uma combinação do uso do clip do CSS para fazer com que o elemento ocupe (quase nenhum) espaço na tela.

Usar a `largura: 0; altura; 0` não é recomendado porque os motores de busca podem penalizar isso, pensando que tem uma intenção maliciosa, como encher de palavras-chave (keyword stuffing).

## Posicionamento absoluto

`position: absolute; left: -99999px` posicionará um elemento fora da tela. No entanto, de acordo com [o artigo da WebAIM](https://webaim.org/techniques/css/invisiblecontent/):

> Elementos navegáveis, como links e controles de formulário, não devem ser escondidos fora da tela. Eles ainda seriam navegáveis por usuários de teclado com visão, mas não seriam visíveis para eles, a menos que sejam estilizados para se tornarem visíveis quando receberem foco do teclado.

Use isso apenas quando seus conteúdos contiverem apenas texto.

## Indentação de texto

`text-indent: -9999px`. Isso só funciona em texto dentro dos elementos `block`. Semelhante à técnica de posicionamento absoluto mencionada acima, os elementos focalizáveis com esse estilo ainda poderão ser focalizados, causando confusão para os usuários com visão que usam a navegação por teclado.

## Formas incorretas

As seguintes maneiras estão incorretas porque escondem o conteúdo do usuário E dos leitores de tela, o que é incorreto se o objetivo é expor apenas aos leitores de tela.

- `display: none`
- `visibility: hidden`
- `hidden` attribute

## Técnicas no mundo real

Idealmente, é recomendado combinar as abordagens acima para garantir que funcione corretamente em todos os navegadores.

Em vez de implementar sua própria maneira de remover um elemento da árvore de renderização e da árvore de acessibilidade (a11y), recomenda-se usar uma das seguintes abordagens de frameworks CSS maduros, que foram testadas em muitos sites.

### Tailwind CSS

```css
.sr-only {
  posição: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: oculto;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
```

### Bootstrap CSS

```css
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
```

## Referências

- [CSS em Ação - Conteúdo invisível apenas para usuários do Leitor de tela](https://webaim.org/techniques/css/invisiblecontent/)
